<template>
<x-dialog v-model="showToast" mask-transition="" dialog-transition="" class="dialog">
  <div @click="showToast=false" class="header">
    <i></i>
  </div>
  <div class="content">
    <h3 class="title">快递详情</h3>
    <div class="express-description">
      快递采用顺丰到付，邮件始发地为苏州昆山。 试用装将在申请日起隔天配送, 如申请日为周 五六日或国定假日，将在下一个工作日寄出。
    </div>
    <div class="price">
      <div class="price-title">快递费用（仅供参考）</div>
      <ul>
        <li>江浙沪：12元</li>
        <li>安徽：14元</li>
        <li>新疆：20元</li>
        <li>西藏：无配送</li>
        <li>其他地区：18元</li>
      </ul>
    </div>
  </div>
</x-dialog>
</template>
<script>
import {
  XDialog
} from "vux";

export default {
  props: {
    visible: Boolean
  },
  computed: {
    showToast: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  components: {
    XDialog
  }
};
</script>
<style lang="less">
.dialog {
    .weui-dialog {
        text-align: left;
        padding: 10px 13px 32px 24px;
        font-size: 14px;
        width: 290px;
        border-radius: 0;
        top: 50%;
        margin: -50% auto 0;
    }
    .header {
        box-sizing: border-box;
        text-align: right;
        height: 26px;
        padding-top: 7px;
        padding-right: 11px;
        position: relative;
        &:before {
            content: '';
            position: absolute;
            top: -15px;
            left: -15px;
            right: -15px;
            bottom: -15px;
        }
        i {
            &:after,
            &:before {
                content: '';
                display: inline-block;
                height: 18px;
                width: 1px;
                background: #666666;
                transform: translateX(-1px) rotate(45deg);
            }
            &:before {
                transform: translateX(0) rotate(-45deg);
            }
        }
    }

    .title {
        text-align: center;
        font-size: 20px;
        color: #000000;
        line-height: 1;
    }
    .express-description {
        line-height: 22px;
        margin-top: 26px;
        color: #666666;
    }
    .express-tips {
        color: #999;
        margin-top: 10px;
        padding-right: 11px;
    }
    .price {
        &-title {
            color: #000000;
            margin-bottom: 14px;
            margin-top: 26px;
            line-height: 1;
        }
        ul > li {
            color: #666666;
            line-height: 22px;
        }
    }
}
</style>
